<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul,li {
            padding: 0;
            margin: 0;
        }
        .box {
            background: url("images/weixin_bg1d20af.jpg");
            height: 33px;
            padding: 15px 0;
        }
        .box ul {
            margin: 0 auto;
            width: 700px;
            height: 33px;
            line-height: 33px;
        }
        li {
            list-style: none;
            float: left;
            margin-left: 20px;
        }
        li a {
            text-decoration: none;
            color: #FFF;
            display: inline-block;
            height: 33px;
            background: url("images/bg.png") no-repeat left -144px;
            padding-left: 15px;
        }
        li span {
            display: inline-block;
            height: 33px;
            background: url("images/bg.png") no-repeat right -144px;
            padding-right: 15px;
        }
        li a:hover {
            background: url("images/bg.png") no-repeat left -192px;
        }
        li span:hover {
            background:url("images/bg.png") no-repeat right -192px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#"><span>我是你爸爸</span></a></li>
            <li><a href="#"><span>爸爸去哪儿了</span></a></li>
            <li><a href="#"><span>爸爸搁这儿呢哈哈</span></a></li>
        </ul>
    </div>
</body>
</html>